<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button
          @click.native="$router.push('/layout/videolist')"
          label="videolist"
          >视频列表</el-radio-button
        >
        <el-radio-button
          @click.native="$router.push('/layout/imgslist')"
          label="imgslist"
          >图片列表</el-radio-button
        >
        <el-radio-button
          @click.native="$router.push('/layout/taglist')"
          label="taglist"
          >标签列表</el-radio-button
        >
        <el-radio-button
          @click.native="$router.push('/layout/classlist')"
          label="classlist"
          >分类列表</el-radio-button
        >
        <el-radio-button
          @click.native="$router.push('/layout/videoaudit')"
          label="videoaudit"
          >案例审核</el-radio-button
        >
      </el-radio-group>
    </div>
    <div class="user-class-content">
      <div class="user-class flex">
        <!-- 用户左边内容 -->
        <div class="user-class-left-content">
          <div class="user-class-left">
            <div
              @click="handleNodeClick(it)"
              class="item cursor flex ai-c jc-c"
              v-for="it in trees"
              :key="it.id"
              :class="{ activelabel: activelabel == it.id }"
            >
              <img
                src="@/assets/anliqu.png"
                style="width: 14px; height: 14px"
                alt=""
              />
              <span class="label"> {{ it.label }}</span>
            </div>
          </div>
        </div>
        <!-- 用户右边内容 -->
        <div class="user-class-right">
          <!-- 头部 -->
          <div class="head">
            <div class="head-top flex ai-c jc-sb">
              <div class="flex toud ai-c">
                <div class="head-search">
                  <el-input
                    clearable
                    v-model="userInfo.name"
                    placeholder="请输入分类名称进行搜索"
                    class="search"
                  ></el-input>
                </div>
                <div class="user-select">
                  <el-select
                    v-model="userInfo.status"
                    clearable
                    @change="admincategorypage"
                    placeholder="请选择状态"
                  >
                    <el-option
                      v-for="item in optionsClasslist"
                      :key="item.valueList"
                      :label="item.labelList"
                      :value="item.valueList"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="head-search-btn">
                  <el-button
                    class="btn-search"
                    @click="admincategorypage"
                  ></el-button>
                </div>
              </div>
              <div class="head-add-btn">
                <el-button
                  @click.stop="setaddUserclassdialogVisible({})"
                  class="add-btn"
                  >新增</el-button
                >
              </div>
            </div>
          </div>
          <!-- 主体内容 -->
          <div class="body-main">
            <el-table
              stripe
              :data="tableData"
              row-key="id"
              default-expand-all
              tooltip-effect="dark"
              ref="multipleTable"
              :tree-props="{ children: 'sonCategoryList' }"
            >
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

              <el-table-column
                width="280"
                prop="name"
                label="分类名称"
              ></el-table-column>
              <el-table-column label="层级">
                <template slot-scope="scope">
                  <span>{{ scope.row.level == 1 ? "1级" : "2级" }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="sort" label="权重">
                <template slot-scope="scope">
                  <i class="el-icon-sort-down" @click="soredown(scope)"></i>
                  <i class="el-icon-sort-up" @click="sortup(scope)"></i>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="所在分区" width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.partitionId | wehere }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                  <el-switch
                    :inactive-value="20"
                    :active-value="10"
                    v-model="scope.row.status"
                    @change="changeSwitch(scope.row)"
                  >
                  </el-switch>
                </template>
              </el-table-column>

              <!-- <el-table-column prop="number" label="数量"></el-table-column> -->
              <el-table-column
                prop="birthday"
                label="操作"
                width="220"
                fixed="right"
              >
                <template slot-scope="scope">
                  <div class="add-three-btn">
                    <span
                      @click="setaddUserclassdialogVisible(scope.row)"
                      class="add-btn cursor"
                      >新增</span
                    >
                    <span
                      icon="el-icon-edit"
                      class="reset cursor"
                      @click="editUser(scope.row)"
                      >编辑</span
                    >
                    <span
                      icon="el-icon-delete"
                      class="del-have-btn cursor"
                      @click="havaVideobtn(scope.row)"
                      >删除</span
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 无视频 -->
    <el-dialog
      title="删除"
      center
      :visible.sync="dialogVisibleNoVideo"
      width="445px"
    >
      <div class="flex jc-c">
        <span class="sure-del">确定删除?</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibleNoVideo = false"
          >取 消</el-button
        >
        <el-button class="surebtn" @click="delUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 有视频 -->
    <el-dialog title="删除" :visible.sync="dialogVisibleHaveVideos" width="30%">
      <span>分类底下有视频,请先移除后删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleHaveVideos = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleHaveVideos = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑框 -->
    <el-dialog title="编辑" center :visible.sync="dialogVisible" width="445px">
      <el-form ref="form" :model="editObj">
        <el-form-item label="">
          <div class="add-name">
            <el-input v-model="editid.name"></el-input>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancelbtn"
          @click="(dialogVisible = false), admincategorypage()"
          >取 消</el-button
        >
        <el-button class="surebtn" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增" :visible.sync="addUserdialogVisible" width="30%">
      <div class="head-input">
        <el-col :span="6">
          <div class="head-input-name">
            <el-input
              v-model="userInfo.name"
              placeholder="请输入分类名称"
            ></el-input>
          </div>
        </el-col>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="adduser-btn">
          <el-button @click="addUserdialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              addUserdialogVisible = false;
              addUser();
            "
            >确 定</el-button
          >
        </div>
      </span>
    </el-dialog>
    <el-dialog
      class="new-add"
      title="新增"
      center
      :visible.sync="addUserclassdialogVisible"
      width="445px"
    >
      <div class="head-input-add">
        <el-form ref="form">
          <!-- <div>一级分类</div> -->
          <el-form-item label="分类" required label-width="80px">
            <el-input
              v-model="cateryname"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="addUserclassdialogVisible = false"
          >取 消</el-button
        >
        <el-button
          class="surebtn"
          @click="
            addUserclassdialogVisible = false;
            addUserclass();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-dialog title="编辑" center :visible.sync="dialogVisible" width="445px">
      <div class="input-list">
        <input type="text" placeholder="请输入分类名称" />
      </div>

      <div class="user-select"></div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisible = false">取 消</el-button>
        <el-button
        class="surebtn"
          @click="
            dialogVisible = false;
            addList();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <!-- 编辑 -->
    <el-dialog title="新增" :visible.sync="editdialogVisible" width="30%">
      <div class="input-list">
        <el-input type="text" placeholder="请输入分类名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            editdialogVisible = false;
            setEdit();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  admincategorypage,
  admincategorystatus,
  admincategorysort,
  admincategoryadd,
  admincategorydel,
  admincategoryupdate,
} from "@/api/index";
const cityOptions = [""];
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: ["上海"],
      cities: cityOptions,
      isIndeterminate: true,
      userInfo: {
        name: "",
        partitionType: 2,
        status: "",
        age: "",
        loaction: "",
        position: "",
        major: "",
      },
      tableData: [],
      dialogVisible: false,
      dialogVisibleNovideo: false,
      editObj: {
        name: "",
        age: "",
        loaction: "",
        position: "",
        major: "",
        number: "",
      },
      userIndex: 0,
      input: "",
      haveVideoshow: false,
      checkAll: false,
      checkedCities: true,
      cities: cityOptions,
      isIndeterminate: true,
      dialogVisible: false,
      editdialogVisible: false,
      dialogVisibleNo: false,
      dialogVisibleget: false,
      addUserclassdialogVisible: false,
      dialogVisibleNoVideo: false,
      // 有视频
      dialogVisibleHaveVideos: false,
      // 请选择分类
      optionSelect: [
        {
          values: "选项1",
          labels: "请选择分区分类",
        },
      ],
      // 分类列表树节点
      trees: [
        {
          id: 2,
          label: "案例区",
        },
        {
          id: 3,
          label: "成片区",
        },
        {
          id: 4,
          label: "素材区",
        },
      ],
      // 新增
      addUserdialogVisible: false,
      haveShow: false,
      value: "",
      value: true,
      // 分类列表
      optionsClasslist: [
        {
          valueList: "",
          labelList: "全部",
        },
        {
          valueList: 10,
          labelList: "有效",
        },
        {
          valueList: 20,
          labelList: "无效",
        },
      ],
      valueList: "",
      valuePage: "",
      // 状态
      valueState: true,
      multipleSelection: [],
      input: "",
      success: true,
      successs: true,
      successThird: true,
      successFour: true,
      successFive: true,
      successSix: true,
      // 新增分类
      catery: {},
      cateryname: "",
      deleteid: {},
      editid: {},
      tabPosition: "classlist",
      activelabel: 2,
    };
  },
  mounted() {},
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  created() {
    this.admincategorypage();
  },
  filters: {
    wehere(val) {
      if (val == 2) {
        return "案例区";
      } else if (val == 3) {
        return "成品区";
      } else if (val == 4) {
        return "素材区";
      }
    },
  },
  methods: {
    setaddUserclassdialogVisible(item) {
      this.addUserclassdialogVisible = true;
      this.catery = item;
      console.log(this.catery);
    },
    soredown(item) {
      if (item.row.level == 1) {
        if (this.tableData[item.row.index + 1]) {
          admincategorysort({
            firstId: item.row.id,
            secondId: this.tableData[item.row.index + 1].id,
          }).then((res) => {
            this.$message.success("交换成功");
            this.admincategorypage();
          });
        } else {
          this.$message.error("不可移动了");
        }
      } else {
        let flagarr = this.tableData.filter((im) => im.id == item.row.pid)[0];
        console.log(flagarr);
        if (flagarr.sonCategoryList[item.row.index + 1]) {
          admincategorysort({
            firstId: item.row.id,
            secondId: flagarr.sonCategoryList[item.row.index + 1].id,
          }).then((res) => {
            this.$message.success("交换成功");
            this.admincategorypage();
          });
        } else {
          this.$message.error("不可移动了");
        }
      }
    },
    sortup(item) {
      if (item.row.index == 0) {
        this.$message.error("顶级不可以上移");
        return false;
      }
      if (item.row.level == 1) {
        admincategorysort({
          firstId: item.row.id,
          secondId: this.tableData[item.row.index - 1].id,
        }).then((res) => {
          this.$message.success("交换成功");
          this.admincategorypage();
        });
      } else {
        let flagarr = this.tableData.filter((im) => im.id == item.row.pid)[0];
        console.log(flagarr);
        admincategorysort({
          firstId: item.row.id,
          secondId: flagarr.sonCategoryList[item.row.index - 1].id,
        }).then((res) => {
          this.$message.success("交换成功");
          this.admincategorypage();
        });
      }
    },
    admincategorystatus(item) {
      admincategorystatus({
        id: item.id,
        status: item.status,
      }).then((res) => {
        console.log(res);
        this.$message.success("修改成功");
        this.admincategorypage();
      });
    },
    admincategorypage() {
      admincategorypage({
        name: this.userInfo.name,
        status: this.userInfo.status,
        partitionType: this.userInfo.partitionType,
      }).then((res) => {
        this.tableData = res.data;
        this.tableData.forEach((item, index) => {
          item.index = index;
          if (item.sonCategoryList && item.sonCategoryList.length > 0) {
            item.sonCategoryList.forEach((it, index) => {
              it.index = index;
            });
          }
        });
        console.log(res);
      });
    },
    //添加
    addUser() {
      if (!this.userInfo.name) {
        this.$message({
          message: "请输入分类名称！",
        });
        return;
      }

      this.tableData.push(this.userInfo);
      this.userInfo = {
        name: "",
        age: "",
        loaction: "",
        number: "",
        position: "",
        major: "",
      };
    },
    // 编辑
    setEdit() {
      if (!this.userInfo.name) {
        this.$message({
          message: "请输入分类名称！",
        });
        return;
      }
      this.tableData.push(this.userInfo);
      this.userInfo = {
        name: "",
        age: "",
        loaction: "",
        number: "",
        position: "",
        major: "",
      };
    },
    // 新增
    addUserclass() {
      if (this.cateryname) {
      } else {
        this.$message({
          message: "带星号必填！",
        });
        return false;
      }

      admincategoryadd({
        name: this.cateryname,
        partitionId: this.userInfo.partitionType,
        pid: this.catery.id ? this.catery.id : null,
      }).then((res) => {
        this.addUserclassdialogVisible = false;
        this.$message.success("新增成功");
        this.admincategorypage();
        this.cateryname = "";
      });
    },
    // 删除
    havaVideobtn(item) {
      this.dialogVisibleNoVideo = true;
      this.deleteid = item;
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 状态
    changeSwitch(data) {
      console.log(data);
      this.admincategorystatus(data);
    },
    //删除
    delUser() {
      admincategorydel({
        id: this.deleteid.id,
      }).then((res) => {
        this.$message.success("删除成功");
        this.admincategorypage();
        this.dialogVisibleNoVideo = false;
      });
      // this.tableData.splice(idx, 1);
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    //编辑
    editUser(item) {
      this.editid = item;
      this.dialogVisible = true;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    confirm() {
      if (!this.editid.name) {
        this.$message.error("请输入名称");
        return false;
      }
      admincategoryupdate({
        id: this.editid.id,
        name: this.editid.name,
      }).then((res) => {
        this.dialogVisible = false;
        this.$message.success("编辑成功");
        this.admincategorypage();
      });
      //
      // this.$set(this.tableData, this.userIndex, this.editObj);
    },

    showRemove() {
      this.haveShow = false;
    },

    Showvideo() {
      this.haveShow = true;
    },
    searchBtn() {
      console.log("查询");
    },

    // 无视频
    NoVideo() {
      this.haveVideoshow = false;
    },

    // 有视频
    haveVideos() {
      this.haveVideoshow = false;
    },

    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleNodeClick(trees) {
      console.log(trees);
      this.activelabel = trees.id;
      this.userInfo.partitionType = trees.id;
      this.admincategorypage();
    },
  },
};
</script>  
<style lang="scss" scoped>
.el-icon-sort-down:hover {
  color: #409eff;
  cursor: pointer;
}
.el-icon-sort-up:hover {
  color: #409eff;
  cursor: pointer;
}
.user-class-content {
  margin-top: 24px;
}
.user-class {
  // height: 633px;
}
.user-class-left-content {
  width: 240px;
  // height: 398px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  margin-right: 20px;
}
.user-class-left {
  padding: 0 10px;
  box-sizing: border-box;
  // width: 200px;
  height: 556px;
  // padding-right: 10px;

  margin-top: 40px;
}
.el-tree {
  width: 200px;
  margin: 0 auto;
}
.user-class-right {
  width: calc(100% - 260px);
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.user-input {
  width: 300px;
  height: 0px;
  margin-right: 30px;
  input {
    width: 300px;
  }
}
.user-select {
  margin-left: 23px;
  margin-right: 23px;
  // height: 0px;
}

.head-search {
  // height: 40px;
  // margin-top: 4px;
}
.head-add-btn {
  // width: 100px;
  // margin-top: 4px;
  .add-btn {
    width: 70px;
    margin-right: 0;
  }
}
.add-btn {
  margin-right: 20px;
}

.sure-del {
  text-align: left;
}
// 删除

.have-or-video {
  width: 63px;
  position: absolute;
  margin: 0 auto;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-color: white;
  top: 13px;
  right: 2px;
  z-index: 999;
  .have-video {
    text-align: center;
    button {
      width: 50px;
      display: block;
      margin: 0 auto;
      margin-top: 4px;
      margin-bottom: 4px;
      padding: 0 0;
      height: 22px;
    }
  }
}

.head-input-add {
  // width: 300px;
  text-align: left;
  input {
    width: 256px;
  }
}

.new-add .el-dialog__headerbtn {
  position: absolute;
  top: 7px;
  right: -28px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
.adduser-btn {
  margin-top: 50px;
}
.el-dialog {
  width: 600px !important;
  box-shadow: none;
}

.el-dialog__body {
  min-width: 600px;
}
.add-name {
  // width: 330px;
  text-align: left;
}

.el-table th.el-table__cell > .cell {
  text-align: center;
}
td {
  // text-align: center !important;
}
.input-list {
  width: 300px;
  text-align: left;
  input {
    width: 256px;
    height: 29px;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 5px;
    padding-left: 3px;
  }
}

// 分页

.page {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin-left: 15px;
  justify-content: flex-start;
  margin-top: 10px;
}
.page-num {
  width: 100px;
  // margin-right: 15px;
}
span {
  font-size: 14px;
}
.page-select {
  margin-right: 15px;
  width: 156px;

  input {
    height: 21px;
  }
}

.go-page {
  width: 500px;
  margin-top: 5px;
  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }
  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}
.no-video {
  margin-right: 343px;
}

.el-dialog__title {
  display: inline-block;
  margin-right: 400px;
}

.el-input__icon {
  line-height: 21px !important;
}

.head {
  width: 100%;
}

.form-list-class {
  margin-bottom: 24px;
  border-radius: 3px;
}
.body-main {
  width: 100%;
  position: relative;
  margin-top: 20px;

  .el-table__body-wrapper {
    padding-bottom: 31px;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background: none !important;
  }
}

.big-table {
  text-align: center;
  width: 100%;
}

.el-dialog__header {
  text-align: left;
}

.big-table button:nth-of-type(1) {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;

  line-height: 1;

  cursor: pointer;

  border: 1px solid #dcdfe6;

  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;

  padding: 7px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.big-table button:nth-of-type(2) {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  margin-left: 3% !important;

  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  text-align: center;

  box-sizing: border-box;
  outline: 0;

  margin-left: 1%;
  transition: 0.1s;
  font-weight: 500;
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.big-table button:nth-of-type(3) {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  margin-left: 3% !important;

  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  text-align: center;

  box-sizing: border-box;
  outline: 0;

  margin-left: 1%;
  transition: 0.1s;
  font-weight: 500;
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.btn {
  width: 600px;
  margin-bottom: 20px;
  margin-left: 192px;
}

.btn button {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn button:nth-of-type(2) {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn button:nth-of-type(3) {
  background-color: #008cba;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn button:nth-of-type(4) {
  background-color: #555555;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.add-three-btn {
  color: #ff5478;
  // width: 278px;
  // text-align: center;
  // button {
  //   width: 80px;
  // }
}
.head-top {
  // width: 825px;
  // justify-content: space-around;
  // margin: 0 auto;
  display: flex;

  .head-input {
    width: 500px;
    margin-right: 15px;
    .head-input-name {
      width: 486px;
      margin: 0 auto;
    }
    input {
      width: 256px;
      display: block;
      margin: 0 auto;
    }
  }
  .head-add {
    width: 100px;
  }
}

.el-button {
}

.search {
  // width: 300px !important;
  // margin-top: -2px;
}

.el-col-3 {
  width: 7.6% !important;
}

.btn-search {
  // margin-top: 32.5% !important;
}

.el-message {
  top: 13% !important;
}

.el-button.is-circle {
  border-radius: 5% !important;
  padding: 12px;
}

.el-row {
  margin-bottom: 2%;
  margin-top: 1%;
}
.user-class-content ::v-deep .el-table .el-table__cell.is-center {
  text-align: left;
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.toud {
  height: 40px;
  width: 70%;
}
.reset {
  margin-right: 20px;
}
.head-search-btn {
  height: 40px;

  button:nth-of-type(1) {
    width: 61px;
    height: 40px;
    background-size: 19px 20px;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    // border-radius: 5px;
    background-color: #ff5478;
    background-image: url("../assets/btnsearch.png");

    align-items: center;
  }
}
.head-add-btn {
  height: 40px;
  button:nth-of-type(1) {
    width: 96px;
    height: 40px;
    color: #ffffff;
    text-align: center;
    border: none;
    // border-radius: 5px;
    background-color: #ff5478; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to left, #ff5478, #ff7aaf);

    align-items: center;
  }
}
.item:hover {
  background: #fff3f5;
}
.item {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #60636b;
  margin-bottom: 10px;
  height: 36px;
  line-height: 36px;
  .label {
    margin-left: 10px;
  }
  &.activelabel {
    background: #fff3f5;
  }
}
</style>
<style scoped>
.user-class-right ::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  display: none;
}
</style>